{% load i18n %}
<!--本文件是market.html的模板-->
<script src="/static/lib/jquery.dataTables.min.js" type="text/javascript"></script>
<link type="text/css" href="/static/css/dataTables.bootstrap.css" rel="stylesheet"/>
<script src="/static/lib/dataTables.bootstrap.js"></script>
<script>
    $(document).ready(function() {
        $('#markets_index').DataTable({
            "paging": false, // 禁止分页
            "bInfo" : false, //是否显示页脚信息，DataTables插件左下角显示记录数
        });
        get_curr_market()
        set_timer()
    });

    function get_curr_market()
    {
        $.post("/btc/get_curr_market", {}, function(jsonobj){
            refresh_markets_left(jsonobj)
        })
    }

    function set_timer()
    {
        var market = setInterval(get_curr_market, 3000);
    }

    function refresh_markets_left(jsonobj)
    {
        // Sort by column 1 and then re-draw
        //table.draw( false );
        $('#markets_index').dataTable().fnClearTable();
        $('#markets_index').dataTable().fnAddData(markets_left_pack_data(jsonobj),true); //刷下表格
        // markets_left_pack_data(jsonobj)
    }
    function markets_left_pack_data(jsonobj)
    {
        // todo order by use_coin_type
        var data = []
        for (i = 0; i < jsonobj.length; i++)
        {
            var info = jsonobj[i];
            if (info.use_coin_type == 'bitcny')
            {
                var list = []
                var tofixed = coin_tofixed(info.use_coin_type)

                var icon_img = g_coin_info[info.coin_type].icon_img

                var percent = 0
                if (info.curr != info.open)
                {
                    percent = (info.curr - info.open) * 100 / info.open
                    tofixed = coin_tofixed(info.use_coin_type)
                    percent = floor_number(percent, tofixed)
                }
                percent_html = "<span class=\"green\">0.00%</span>"
                if (percent > 0) {
                }
                else {
                }

                var tofixed0 = coin_tofixed(info.coin_type)
                var tofixed1 = coin_tofixed(info.use_coin_type)

                var curr = info.curr.toFixed(tofixed1)
                var volume = info.volume * info.curr
                volume = volume.toFixed(tofixed1)

                var heigh= info.high.toFixed(tofixed1)
                var low = info.low.toFixed(tofixed1)
                curr = Calculate.CommaFormattedOnly(curr)

                var high = Calculate.CommaFormattedOnly(high)
                var low = Calculate.CommaFormattedOnly(low)
                volume = Calculate.CommaFormattedOnly(volume)

                var  td1 = "<img class=\"svg \"  src=\"" + icon_img +"\"/> " +
                g_coin_info[info.coin_type].name_upper + " " + g_coin_info[info.coin_type].cname
                var  td2 = curr
                if (info.arrow == 1)
                {
                    td2 = "<span class=\"red\" >" + curr + "</span>" + "<i = class=\"fa fa-arrow-up red\" ></i>";
                }
                if (info.arrow == 2)
                {
                    td2 = "<span class=\"green\" >" + curr + "</span>" +
                    "<i = class=\"fa fa-arrow-up green\" ></i>";
                }
                var  td3 = heigh
                var  td4 = low
                var  td5 = volume

                var td6 = "<span class=\"green\">0.00%</span>"
                if (percent > 0) {
                    td6 = "<span class=\"red\">+"+percent+"%</span>"
                }
                else {
                    td6 = "<span class=\"green\">"+percent+"%</span>"
                }
                var td7="<a href=\"{%url 'trade'%}?type=" + info.coin_type + "2" + info.use_coin_type + "\" class=\"btn btn-block btn-success\">{% trans '马上交易'%}</a>"
                list.push(td1)
                list.push(td2)
                list.push(td3)
                list.push(td4)
                list.push(td5)
                list.push(td6)
                list.push(td7)
                data.push(list)
            }
        }
        return data
    }
</script>

<style>
    #markets_index .table td.magenta:hover span{color:#ff007a; b}
    #markets_index .table td.green:hover span{color:#85c700;}
    #markets_index td {
        font-size: 14px;
        font-weight:bold;
    }
    #markets_index .svg{
        width:16px;
        height:16px;
    }
</style>

<table id="markets_index" class="table table-hover table-striped" cellspacing="0" width="100%">
    <thead>
    <tr class="gray">
        <th width="20%">{% trans '币种' %}</th>
        <th>{% trans '最新价格' %}(CNY)</th>
        <th>{% trans '今日最高' %}(CNY)</th>
        <th>{% trans '当前最低' %}(CNY)</th>
        <th>{% trans '24小时成交量' %}(CNY)</th>
        <th>{% trans '日涨跌' %}</th>
        <th>{% trans '操作' %}</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>{% trans 'etc莱特币' %}</td>
        <td>$950000</td>
        <td>$22,684,951</td>
        <td>$22,684,951</td>
        <td>$22,684,951</td>
        <td class="magenta"> -11.38 %</td>
        <td><a href="{%url 'trade'%}?type=btc2bitcny" class="btn btn-block btn-success">{% trans '马上交易'%}</a> </td>
    </tr>
    <tr>
        <td>{% trans 'BTC比特币' %}</td>
        <td>$950000</td>
        <td>$22,684,951</td>
        <td>$22,684,951</td>
        <td>$22,684,951</td>
        <td class="magenta"> -1.39 %</td>
        <td><a href="{%url 'trade'%}?type=btc2bitcny" class="btn btn-block btn-success">{% trans '马上交易'%}</a>
        </td>
    </tr>
    </tbody>
</table>

